import 'package:aone_common/entities/webui/webui.dart';
import 'package:aone_common/services/services.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:prototype/components/v_carousel/v_carousel_controller.dart';
import 'package:prototype/theme/custom_theme.dart';

class VCarousel extends StatelessWidget {
  const VCarousel({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final slideList = GlobalService.to.state.slideList;
    final controller = Get.put(VCarouselController());
    return Stack(
      alignment: Alignment.center,
      clipBehavior: Clip.none,
      children: [
        CarouselSlider(
          options: CarouselOptions(
            viewportFraction: 0.9,
            autoPlay: true,
            pageSnapping: true,
            aspectRatio: 18 / 9,
            enlargeCenterPage: true,
            enlargeStrategy: CenterPageEnlargeStrategy.height,
            onPageChanged: (index, _) => controller.currentIndex = index,
          ),
          items: _buildSlide(slideList),
        ),
        Positioned(
          child: Obx(() => _indicators(slideList, controller.currentIndex)),
          bottom: -20.h,
        ),
      ],
    );
  }

  Widget _indicators(RxList<Slides> slides, int currentIndex) {
    Color unselectedColor = CustomTheme.colorSchema.gray.shade500;
    Color selectedColor = CustomTheme.colorSchema.primaryColor;

    return Padding(
      padding: const EdgeInsets.only(top: 15.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: slides.map((e) {
          int index = slides.indexOf(e);
          bool isActive = index == currentIndex;
          return AnimatedContainer(
            width: isActive ? 20 : 8,
            height: 8,
            margin: index == slides.length - 1
                ? null
                : const EdgeInsets.only(right: 7),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              color: isActive ? selectedColor : unselectedColor,
            ),
            duration: const Duration(milliseconds: 300),
          );
        }).toList(),
      ),
    );
  }

  List<Builder> _buildSlide(RxList<Slides> slides) {
    return slides.map(
      (e) {
        return Builder(builder: (BuildContext context) {
          return Container(
            width: 1.sw,
            margin: EdgeInsets.symmetric(horizontal: 5.w),
            decoration: const BoxDecoration(),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(15.0)),
              child: CachedNetworkImage(
                imageUrl: e.thumb!,
                fit: BoxFit.fill,
              ),
            ),
          );
        });
      },
    ).toList();
  }
}
